<!--首页-->

<div class="main" ng-controller="HomeController">
    <!--轮播部分-->
    <div class="slider">
        <a class="slider-left" href="">
            <img style="display: none" src="http://s4.xiaohongshu.com/static/img/web/home/left_arrow.png?s=1471971752">
        </a>
        <a class="slider-right"  href="">
            <img style="display: none" src="http://s4.xiaohongshu.com/static/img/web/home/right_arrow.png?s=1471971752">
        </a>
        <ul class="slider-img" style="width: 7200px">
            <li><a href="#/quality" onclick="qualiy()">
            	<img src="http://s4.xiaohongshu.com/static/img/web/home/banner_a.jpg?s=1475084382" alt=""/>
                </a>
            </li>
            <li>
            	<a href="" id="myVideo">
            		<img src="http://s4.xiaohongshu.com/static/img/web/home/banner_e.jpg?s=1471971752" alt=""/>
                </a>
            </li>
            <li>
            	<a href="#/xiaohongshujieshao">
            	<img class="" src="http://s4.xiaohongshu.com/static/img/web/home/banner_d.jpg?s=1471971752" alt="小红书_下载APP"/>
                </a>
            </li>
        </ul>
        <!--点击第二章轮播图弹出的视频-->
        <div class="div-video" style="display: none;">
        	<div class="video-area" style="height: 100%;">
        	<div class="video-slogan">我们来了，带着现金和鲜肉</div>
        	<div class="video-source">
        		<embed src="http://static.youku.com/v1.0.0535/v/swf/loader.swf?VideoIDS=XOTY2MzY2Nzky&amp;isAutoPlay=true&amp;embedid=MjcuMTE1LjExNy4yMjICMjQxNTkxNjk4AgI%3D&amp;wd=&amp;vext=pid%3D%26emb%3DMjcuMTE1LjExNy4yMjICMjQxNTkxNjk4AgI%3D%26bc%3D%26type%3D0" 
        			allowfullscreen="true" quality="high" width="618" height="141" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" title="Adobe Flash Player">
        	</div>
        	</div>
        	<a href=""><img class="close j_prop_close" src="http://s4.xiaohongshu.com/static/fls/img/shop_web/home/prop/pop_close.jpg" style="left: 631.68px;"></a>
        </div>
    </div> 
    <div class="selected">每日精选笔记
        <span class="more">
            更多
            <img src="http://s4.xiaohongshu.com/static/img/web/home/arrow.png?s=1471971752">
        </span>
    </div>
    <ul class="specify" style="margin: 0 auto;width: 1250px;height: 1974px">

    </ul>
    
    
</div>

<!--specify模板-->
<script id="specifyTemp" type="text/html">
    <li class="neirong">
        <a class="tankuang" onclick="tanchuxiangqing()">
            <div class="spe-img">
                <img src="{{imageb}}" alt="">
            </div>
            <div class="spe-text">{{desc}}</div>
            <div class="spe-info">
                <a href="">
                	<img src="//s4.xiaohongshu.com/static/img/v2/web/common/comment.png" alt="">
                    <span>{{comments}}</span>
                </a>
                <a href="" style="position: absolute;right: 50px"><img src="//s4.xiaohongshu.com/static/img/v2/web/common/unfollow.png" alt="">
                    <span>{{likes}}</span>
                </a>
            </div>
        </a>
    </li>
</script>
<!--商品详情页面模板-->
<script id="commodityTemp" type="text/html">
	<!--点击商品弹出页面-->
    <div class="commodity" >
    	<div class="commodity-header">
    		<div style="display: inline-block;" class="fis-img">
    		<img src="{{user.image}}"/>
    		</div>
    		<h5>{{user.nickname}}</h5>
    		<div class="com-head-info">
    			<div class="left-fenxiang">于<span>{{time}}</span>分享</div>
    			<div class="right-pinglun">
    				<img src="http://www.xiaohongshu.com/static/img/v2/web/list/note/talk.png"/>
    				<span>{{comments}}</span>
    				<img style="margin-left: 20px;" src="http://www.xiaohongshu.com/static/img/v2/web/list/note/unfollow2.png"/>
    				<span>{{likes}}</span>
    			</div>
    		</div>
    	</div>
    	<div class="commodity-info">
    		<p>{{desc}}
    			<div style="margin-top: 19px;font-size: 13px;color: #b7b8ba;">
    				价格：<span>¥</span>
    				
    			</div>
    		</p>
    	</div>
    	<div class="commodity-img">
    		<!--<img src="{{images_list[0].url}}"/>-->

    		<div class="commodity-handle">
    			<a href="">举报</a>
    			<a href="">
    				<img src="//s4.xiaohongshu.com/static/img/v2/web/list/note/share.png?s=1471971752" alt="" />
    				分享
    			</a>
    		</div>
    	</div>
    		
    	<div>
    	<ul id="yh-pl">
    
    	</ul>
    	</div>
    </div>
</script>
<!--js---代码-->
<script type="text/javascript">
    var nowImg=0;
    var lis=$(".slider-img li");
    var $bannerIn=$(".slider-img");
    $(".slider-img li:first").clone().appendTo(".slider-img");
    function donghua(){
        $bannerIn.animate({
            "left":nowImg*(-1200)
        },700)
    }
    //按钮事件
    $(".slider-left").mouseover(function () {
        $(".slider-left img,.slider-right img").css("display", "block")
    }).click(function(){
        if(!$bannerIn.is(":animated")){
            if(nowImg>0){
                nowImg--;
                donghua();
            }else{
                nowImg=lis.length-1;
                $bannerIn.css("left",lis.length*-1200);
                donghua();
            }
        }
    }).mouseout(function () {
        $(".slider-left img,.slider-right img").css("display", "none")
    });

    $(".slider-right").mouseover(function () {
        $(".slider-left img,.slider-right img").css("display", "block")
    }).mouseout(function () {
        $(".slider-left img,.slider-right img").css("display", "none")
    }).click(lunbo);
    function lunbo(){
        if(!$bannerIn.is(":animated")){
            if(nowImg<lis.length-1){
                nowImg++;
                donghua();
            }else{
                nowImg=0;
                $bannerIn.animate({"left":lis.length*(-1200)},700,function(){
                    $bannerIn.css("left",0);
                })
            }
        }
    }
    //自动轮播
    t=setInterval(lunbo,2000)//无限轮播
    $(".slider").mouseenter(function() {
        clearInterval(t);
    });
    $(".slider").mouseleave(function() {
        clearInterval(t);
        t=setInterval(lunbo,2500)
    });//轮播代码结束
    
    //点击轮播图片弹出视频
    var $divVideo=$(".div-video");
    var $yinying=$( '<div id="yinying" style="position:fixed;top:0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);z-index: 108;display: block;"></div>');
	$("#myVideo").click(function(){
		$divVideo.css("display","block");
    	$yinying.appendTo("body").click(function(){
    		$divVideo.css("display","none");
    		$(this).remove()
    	});
	})
    //点击X关闭
        $(".div-video img").on("click",function(){
        	$divVideo.css("display","none");
    		$yinying.remove();
        })
	//  视频部分结束
    $(function () {
    	//请求首页的数据
    	var ind=1;
    $.ajax({
        url: "json/index1-1.json",
        method: "get",
        dataType: "json",
        success:function (data) {
            $.each(data.array,function (i,value) {
				var $specufy = $(template("specifyTemp", value)).appendTo(".specify");
				var $elem;
			$(".tankuang").click(function(){
				var $inda=$(".tankuang").index(this)/2;
				if($inda==i){
					var $xiangqing=$(template("commodityTemp",value)).appendTo(".main");
					for(var j=0;j<value.images_list.length;j++){
						$elem=$('<img src="'+value.images_list[j].url+'"/>');
						$(".commodity-handle").before($elem);
					}
					
				}
			 	ind=$inda+1;
				    $.ajax({
				        url: 'json/评论json/content-'+ind+'.json',
				        method: "get",
				        dataType: "json",
				        success:function (data) {
				        	console.log(data)
				            $.each(data.comments,function (i,value) {
									for(var j=0;j<data.comments.length;j++){	
									var $list=$('<li class="pl-text"><img src="'+data.comments[j].user.image+'"/><div class="user-name">'+data.comments[j].user.nickname+'<span>'+data.comments[j].time+'</span></div><p>'+data.comments[j].content+'</p></li>')
									$list.appendTo("#yh-pl");
									}
							})
				            	 
				           }
				   		 })//评论ajax
			})
            });
        }
        
    });
 });
   //点击轮播第一个图片,跳转到新页面时 改变头部ui
   function qualiy(){
   	$(".header-nav a").eq(1).addClass('active').siblings().removeClass("active");
   }
    //点击商品弹出详情
    function tanchuxiangqing(){
    var $yinying=$( '<div id="yinying" style="position:fixed;top:0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);z-index: 108;display: block;"></div>');
    	$yinying.appendTo("body").click(function(){
    		$(".commodity").remove()
    		$(this).remove()
    	});
	}
</script>